---
title: "New Filters Tool Panel"
enterprise: true
---

The new **Filters Tool Panel** allows accessing the grid's filters without needing to open up the column menu.

## Enabling New Filters Tool Panel

{% gridExampleRunner title="New Filters Tool Panel" name="simple" /%}

To use the new Filters Tool Panel, set `enableFilterHandlers = true`, and use the `'filters-new'` [Side Bar Configuration](./side-bar/#configuring-the-side-bar).

If a filter is set from anywhere outside of the tool panel, e.g. from the column menu, the filter will automatically be added to the tool panel. Once a filter appears in the tool panel, it will remain until it's removed from within the tool panel.

## Using Buttons

The tool panel can be configured to have global [Apply, Clear, Reset and Cancel Buttons](./filter-applying/#apply-clear-reset-and-cancel-buttons). These behave the same as when used within an individual filter, but instead apply to all filters at once.

To use global buttons, every filter must first be configured to use the buttons. The global buttons can then be passed to the tool panel configuration when using `agNewFiltersToolPanel`, by passing an `IToolPanelNewFiltersCompParams` object:

{% interfaceDocumentation interfaceName="IToolPanelNewFiltersCompParams" config={"description": ""} /%}

The example below demonstrates using buttons with the tool panel:

{% gridExampleRunner title="New Filters Tool Panel Buttons" name="using-buttons" /%}

Note that when opened from the column menu, the buttons will be visible within the individual filters. Within the tool panel, only the global buttons will be visible.

## Configuring Filters

### Changing Selectable Filters

For each column filter, the filter type can be changed by using the dropdown within the tool panel. To enable switching filters, set `filter: 'agSelectableColumnFilter'` on the column definition. For any other `filter` value, the dropdown will not be displayed.

By default, the dropdown will allow switching between:
* `Simple Filter` - [Text Filter](./filter-text/), [Number Filter](./filter-number/) or [Date Filter](./filter-date/), depending on the [Cell Data Type](./cell-data-types/)
* `Selection Filter` - [Set Filter](./filter-set)
* `Combo Filter` - [Multi Filter](./filter-multi) (if the `MultiFilterModule` is loaded)

To allow other filters to be configured in the dropdown, `filterParams` of type `SelectableFilterParams` can be set on the column definition:

{% interfaceDocumentation interfaceName="SelectableFilterParams" config={"description": ""} /%}

### Suppressing Filters

To remove a particular column / filter from the tool panel, set the column property `suppressFiltersToolPanel` to `true`.

{% apiDocumentation source="column-properties/properties.json" section="filtering" names=["suppressFiltersToolPanel"] /%}

### Example: Configuring Filters

The example below demonstrates configuring filters:

* The **Athlete** column does not show a dropdown as it has `filter: 'agSetColumnFilter'` set.
* The **Age** column shows all three grid-provided filter options by default.
* The **Country** column is configured to show the Set Filter before the Text Filter.
* The **Year** column is configured to show a custom filter component with the Set Filter.
* The **Date** column has `suppressFiltersToolPanel: true` set, so it does not show in the tool panel.

{% gridExampleRunner title="New Filters Tool Panel Configuration" name="configuring-filters" /%}

## Filters Tool Panel State

When the grid initialises, the tool panel only shows active filters provided in the [Initial State](./grid-state/) filter model. The tool panel can also be configured via initial state to show inactive filters, or change the order and expansion state. This is provided to the Side Bar state as a `NewFiltersToolPanelState` object:

{% interfaceDocumentation interfaceName="NewFiltersToolPanelState" config={"description": ""} /%}

{% gridExampleRunner title="New Filters Tool Panel State" name="state" /%}

## Filter Instances

The filters provided in the tool panel are the same instances as the filter in the column menu. This has the following implications:

* Configuration relating to filters equally applies when the filters appear in the tool panel.
* The filter behaves exactly as when it appears in the column menu. E.g. the Apply button will have the same meaning when used in the tool panel. Also the relationship with the Floating Filter (if active) will be the same.
* If the filter is open on the tool panel and then the user subsequently opens the column menu, the tool panel filter will be closed. Because the filter is the same filter instance, it will only appear at one location at any given time.

## Next Up

Continue to the next section to learn about the old [Filters Tool Panel](./tool-panel-filters/).
